<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info" v-if="isLogin">
        <u-avatar :src="userInfo.avatar || '/static/images/default-avatar.png'" size="140"></u-avatar>
        <view class="user-detail">
          <view class="user-name">{{ userInfo.nickname || '未设置昵称' }}</view>
          <view class="user-id">ID: {{ userInfo.id }}</view>
        </view>
        <view class="edit-btn" @click="goEditProfile">
          <u-icon name="edit-pen" color="#2979ff" size="34"></u-icon>
        </view>
      </view>
      
      <view class="login-btn" v-else @click="goLogin">
        <u-avatar size="140"></u-avatar>
        <view class="login-text">
          <view class="login-title">登录/注册</view>
          <view class="login-desc">登录后体验更多功能</view>
        </view>
        <u-icon name="arrow-right" color="#c8c9cc" size="34"></u-icon>
      </view>
    </view>
    
    <!-- 数据统计 -->
    <view class="stats-card">
      <view class="stats-item" @click="navTo('/pages/todo/index')">
        <view class="stats-num">{{ todoCount }}</view>
        <view class="stats-label">待办事项</view>
      </view>
      <view class="stats-item" @click="navTo('/pages/wish/index')">
        <view class="stats-num">{{ wishCount }}</view>
        <view class="stats-label">愿望清单</view>
      </view>
      <view class="stats-item" @click="navTo('/pages/achievement/index')">
        <view class="stats-num">{{ achievementCount }}</view>
        <view class="stats-label">成果记录</view>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="menu-card">
      <view class="menu-group">
        <view class="menu-title">应用功能</view>
        <u-cell-group>
          <u-cell 
            title="数据统计" 
            icon="calendar" 
            isLink 
            @click="handleFeatureClick('stats')"
          ></u-cell>
          <u-cell 
            title="分类管理" 
            icon="tags" 
            isLink 
            @click="handleFeatureClick('category')"
          ></u-cell>
          <u-cell 
            title="我的收藏" 
            icon="star" 
            isLink 
            @click="handleFeatureClick('favorite')"
          ></u-cell>
        </u-cell-group>
      </view>
      
      <view class="menu-group">
        <view class="menu-title">设置</view>
        <u-cell-group>
          <u-cell 
            title="个人资料" 
            icon="account" 
            isLink 
            @click="goEditProfile"
          ></u-cell>
          <u-cell 
            title="通用设置" 
            icon="setting" 
            isLink 
            @click="navTo('/pages/user/settings')"
          ></u-cell>
          <u-cell 
            title="关于我们" 
            icon="info-circle" 
            isLink 
            @click="navTo('/pages/user/about')"
          ></u-cell>
        </u-cell-group>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" v-if="isLogin" @click="handleLogout">
      <u-button type="error" text="退出登录"></u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getOverview } from '@/api/home' // 导入首页使用的同一个接口

export default {
  data() {
    return {
      todoCount: 0,
      wishCount: 0,
      achievementCount: 0,
      todoProgress: 0,
      wishProgress: 0,
      newAchievementCount: 0
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'user/isLogin',
      userInfo: 'user/userInfo'
    })
  },
  onShow() {
    if (this.isLogin) {
      this.loadData()
    }
  },
  methods: {
    ...mapActions('user', ['logout']),
    
    // 加载数据 - 使用与首页相同的接口和处理方式
    async loadData() {
      try {
        // 显示加载中
        uni.showLoading({
          title: '加载中...'
        })
        
        // 获取概览数据
        const overviewResponse = await getOverview()
        console.log('用户页面概览数据响应:', overviewResponse)
        
        // 处理概览数据 - 考虑两种可能的响应格式
        const overviewData = overviewResponse.data || overviewResponse
        
        if (overviewData) {
          // 如果存在todo、wish、achievement字段
          if (overviewData.todo && overviewData.wish && overviewData.achievement) {
            const { todo, wish, achievement } = overviewData
            // 转换字符串为数字
            this.todoCount = parseInt(todo.count) || 0
            this.todoProgress = parseInt(todo.progress) || 0
            this.wishCount = parseInt(wish.count) || 0
            this.wishProgress = parseInt(wish.progress) || 0
            this.achievementCount = parseInt(achievement.count) || 0
            this.newAchievementCount = parseInt(achievement.newCount) || 0
            
            console.log('用户页面概览数据处理成功')
          } else {
            console.error('用户页面概览数据格式不正确')
            this.resetData()
          }
        } else {
          console.error('获取用户页面概览数据失败')
          this.resetData()
        }
      } catch (error) {
        console.error('加载用户页面数据失败', error)
        this.resetData()
        
        uni.showToast({
          icon: 'none',
          title: '加载数据失败，请重试'
        })
      } finally {
        // 隐藏加载中
        uni.hideLoading()
      }
    },
    
    // 重置数据
    resetData() {
      this.todoCount = 0
      this.todoProgress = 0
      this.wishCount = 0
      this.wishProgress = 0
      this.achievementCount = 0
      this.newAchievementCount = 0
    },
    
    // 处理功能点击
    handleFeatureClick(feature) {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      // 检查是否有对应页面，否则提示功能开发中
      switch (feature) {
        case 'stats':
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
          break
        case 'category':
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
          break
        case 'favorite':
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
          break
        default:
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
      }
    },
    
    // 去登录页面
    goLogin() {
      uni.navigateTo({
        url: '/pages/user/login'
      })
    },
    
    // 去编辑个人资料页面
    goEditProfile() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages/user/profile'
      })
    },
    
    // 页面导航
    navTo(url) {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      try {
        uni.navigateTo({ 
          url,
          success: () => {
            console.log('跳转成功:', url)
          },
          fail: (err) => {
            console.error('跳转失败:', err)
            // 如果跳转失败，可能是页面不存在，显示开发中提示
            uni.showToast({
              title: '功能开发中',
              icon: 'none'
            })
          }
        })
      } catch (error) {
        console.error('跳转异常:', error)
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        })
      }
    },
    
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            await this.logout()
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            
            // 重置数据
            this.resetData()
            
            // 刷新页面
            this.$forceUpdate()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 40rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.user-card {
  background-color: #fff;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-detail {
  flex: 1;
  margin-left: 30rpx;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: #999;
}

.edit-btn {
  padding: 10rpx;
}

.login-btn {
  display: flex;
  align-items: center;
}

.login-text {
  flex: 1;
  margin-left: 30rpx;
}

.login-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.login-desc {
  font-size: 24rpx;
  color: #999;
}

.stats-card {
  background-color: #fff;
  display: flex;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stats-item {
  flex: 1;
  text-align: center;
  position: relative;
}

.stats-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: #eee;
}

.stats-num {
  font-size: 40rpx;
  font-weight: bold;
  color: #2979ff;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
}

.menu-card {
  background-color: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.menu-group {
  margin-bottom: 20rpx;
}

.menu-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #666;
}

.logout-btn {
  margin: 60rpx 30rpx 0;
}
</style> 